@charset 'utf-8';
/*@import "reset";*/
/*@import "common";*/ 
@import "utils";
.personInfoWeb{
    @include web;
    .personInfoCon{
        @include midContent;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        &>ul{
            margin-top: r(45);
            &>li{
              padding-left: r(50);
              padding-right: r(20);
              height: r(90);
              line-height: r(90);
              border-bottom: 1px solid #d0d0d0;
              span{
                  font-size: r(24+8);
                  color: #626362;
              }
              .avar{
                  float: right;
                  height: 100%;
                  width: r(140);
                  font-size: 0;
                  div:first-of-type{
                      position: relative;
                      display: inline-block;
                      vertical-align: middle;
                      width:r(70);
                      height: r(70);
                      border-radius: 50%;
                      overflow: hidden;
                      img{
                          width: 100%;
                          @include abCenter;
                      }
                  }
                  div:last-of-type{
                      display: inline-block;
                      vertical-align: middle;
                      height: r(70);
                      line-height: r(70);
                      width: r(60);
                      text-align: center;
                      img{
                          display: inline-block;
                          vertical-align: middle;
                          width: 25%;
                      }
                  }
              } 
              input{
                  height: r(40);
                  line-height: r(40);
                  font-size: r(24+8);
                  color: #626362;
                  margin-left: r(20);
                  width: r(500);
                  border: none;
                  outline: none;
                  background: transparent;
              } 
            }
        }
        .mask{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(153,153,153,.7);
            .maskCon{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                width: r(600);
                border-radius: r(15);
                background: white;
                padding: r(25) r(30) r(80) r(30);
                box-sizing: border-box;
                .close{
                   position: absolute;
                   right: r(30);
                   top:r(15);
                   img{
                       width: r(25);
                   }
                }
                &>ul{
                    width: 100%;
                    li{
                        color: #3a3a3a;
                        border-bottom: r(1) solid #e0e0e0;
                        
                    }
                    .title{
                        text-align: center;
                        font-size: r(30+8);
                        text-align: center;
                        padding-bottom: r(30);
                    }
                    .item{
                        font-size: 0;
                        margin-top: r(50);
                        padding-bottom: r(30);
                        img:first-of-type{
                            margin-left: r(24);
                            width: r(40);
                            vertical-align: middle;
                        }
                        span{
                            width: r(385);
                            display: inline-block;
                            vertical-align: middle;
                            font-size: r(26+8);
                            margin-left: r(24);
                            
                        }
                        img:last-of-type{
                            display:inline-block;
                            vertical-align: middle;
                            width: r(15);
                        }
                    }
                }
            }
           
        }
        .saveBtn{
            height: r(65);
            width: r(455);
            border: 2px solid #808180;
            color: #808180;
            display: block;
            outline: none;
            text-align: center;
            line-height: r(65);
            margin: 0 auto;
            margin-top: r(74);
            background: transparent;
            font-size: r(26+8);
        }
    }
}
